<template>
  <div class="MailLabel">
    <header class="set-header">
      <span class="auto_title">标签列表</span>
      <el-button size="mini" type="primary" @click="addLabel">
        +新建标签
      </el-button>
    </header>
    <div class="gray"></div>
    <div class="tagList common-scroll-y" v-show="list.length>0" :style="{height:$height - 230+'px'}">
      <div class="tagItem" v-for="item in list" :key="item.id">
        <el-button size="small" :style="{background:item.labelColor}">{{item.labelName?item.labelName:'--'}}
        </el-button>
        <div class="btns">
          <span class="icon-bianji iconBtn" title="编辑" @click="show(item)"></span>
          <span class="icon-delete_icon iconBtn" title="删除" @click="delRow(item.id)"></span>
        </div>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false"
               :close-on-press-escape	='false'
               :visible.sync="dialogVisible" width="500px" :title="this.form.id?'编辑标签':'新增标签'" center>
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px"  @keyup.enter.native="()=>{}">
        <el-form-item label="标签名称" prop="labelName">
          <el-input v-model.trim="form.labelName" size="small" placeholder="请输入标签名称" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="标签颜色" prop="labelColor">
          <el-color-picker
            v-model="form.labelColor"
            :predefine="predefineColors">
          </el-color-picker>
        </el-form-item>
      </el-form>
      <!-- 底部按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button style="border-radius: 5px;color: #333" @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button style="border-radius: 5px" type="primary" @click="saveInfo"
                   size="mini">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {query, del, save, update} from "@/api/mail/admin/mail-label";

    export default {
        name: "MailLabel",
        data() {
            return {
                list: [],
                color: '',
                dialogVisible: false,
                form: {
                    id: '',
                    labelName: '',
                    labelContent: '',
                    labelColor: '#3399F6'
                },
                rules: {
                    labelName: [
                        {required: true, message: '请输入标签名称', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ],
                    labelColor: [
                        {required: true, message: '请选择标签颜色', trigger: 'blur'},
                    ],
                },
                predefineColors: ['#000000', '#BE5957', '#DA762F', '#139891', '#4A669F', '#595AC1', '#333333', '#E63C38', '#EC994D', '#5DBD7F', '#5B87ED', '#8D50BF', '#7B8291', '#F07A79', '#E3AE02', '#7EC65E', '#45A7EE', '#ACACAC'],
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                query().then(res => {
                    this.list = res.data.data;
                }).catch(err => {
                    console.log(err)
                });
            },
            delRow(id) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "success"
                }).then(() => {
                    del(id).then(res => {
                        this.$message({
                            type: "success",
                            message: res.data.msg
                        });
                        this.$store.dispatch('update_labelList').then(()=>{
                            this.bus.$emit('refreshFolderChange');
                        })
                        this.getData();
                    }).catch(err => {
                        console.log(err)
                    });
                })
            },
            addLabel() {
                if (this.$refs.ruleForm) {
                    this.$refs.ruleForm.resetFields();
                }
                this.form.id = '';
                this.dialogVisible = true;
            },
            show(item) {
                this.form = {...item};
                this.dialogVisible = true;
            },
            saveInfo() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        if (this.form.id) {//修改
                            update(this.form).then(res => {
                                this.dealEnd(res)
                            }).catch(err => {
                                console.log(err)
                            });
                        } else {//新增
                            save(this.form).then(res => {
                                this.dealEnd(res)
                            }).catch(err => {
                                console.log(err)
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
            dealEnd(res) {
                if (res.data.success) {
                    this.dialogVisible = false;
                    this.$message({
                        type: "success",
                        message: res.data.msg
                    });
                    this.$store.dispatch('update_labelList').then(()=>{
                        this.bus.$emit('refreshFolderChange');
                    })
                    this.$refs.ruleForm.resetFields();
                    this.getData();
                } else {
                    this.$message({
                        type: "success",
                        message: res.data.msg
                    });
                }

            }
        }
    }
</script>

<style scoped lang="scss">
  $activeColor: #2A97F9;
  .MailLabel {
    position: relative;

    .add-btn {
      text-align: right;
      margin-bottom: 15px;
    }

    .el-button {
      color: #fff;
      border: 0;
    }

    .tagItem {
      display: flex;
      justify-content: space-between;
      padding: 20px 30px;
      background-color: #fff;
      border-bottom: 1px solid #ddd;
    }

    .btns {
      span {
        color: #666;
        cursor: pointer;
        margin: 0 5px;
      }
    }

    .dialog-title {
      font-size: 16px;
      margin-bottom: 30px;
    }
  }
</style>
